<template>
  <div v-title data-title="补货工作台">
    <el-card class="box-card" shadow="hover">
      <div>
        <el-input
          v-model="scanInput"
          :placeholder="scanInputPlaceholder"
          class="headerInputClass"
          @keydown.enter.native="enterScanInput()"
          ref="scanInputfocus"
          @focus="$event.currentTarget.select()"
          autofocus="autofocus"
        >
        </el-input>
      </div>
      <div>
        <el-descriptions class="margin-top" border :column="3">
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="任务编号"
          >
            {{ BillId }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="商品编码"
          >
            {{ CurrentGoods.SkuId }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="箱规"
          >
            {{ CurrentGoods.CartonPcs }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="商品描述"
          >
            {{ CurrentGoods.SkuName }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-row :gutter="12" class="box-card card_box">
      <el-col :span="6">
        <el-card shadow="hover" class="imageClass_detail imageClass">
          <div slot="header" class="clearfix">
            <span>原货架位置[{{ CurrentGoods.FromLoc }}]</span>
          </div>
          <div class="imageClass">
            <el-image :src="Imag.OriginalLocationImag" lazy></el-image>
          </div>
        </el-card>
        <el-col :span="6"> </el-col>
        <el-card shadow="hover" class="imageClass_detail">
          <div slot="header" class="clearfix">
            <span>原容器位置[{{ CurrentGoods.CID }}]</span>
          </div>
          <div class="rotateClass">
            <el-image :src="Imag.OriginalCIDImag" lazy>
              <div slot="error" class="image-slot"></div>
            </el-image>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="box-card_detail">
          <div slot="header" class="clearfix">
            <span>商品图片</span>
          </div>
          <div class="imageClass">
            <el-image
              :src="localhostPath + CurrentGoods.ImgUrl"
              lazy
            ></el-image>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="box-card_detail">
          <div slot="header" class="clearfix">
            <span>数量信息</span>
          </div>
          <div>
            <div class="ItemNumInfo" @click="clickCalculator()">
              <span>{{ scansNum }}</span
              >/<br /><span>{{ scansTotalNum }}</span>
            </div>
            <br /><br />
            <div class="ItemNumlabel">已补货数量/补货总数量</div>
            <div class="ItemNumInfoDetail">单位：{{ CurrentGoods.Unit }}</div>
            <div class="ItemNumInfoDetail">
              规格：<span>{{ CurrentGoods.Spec }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="imageClass_detail imageClass">
          <div slot="header" class="clearfix">
            <span>目标货架位置[{{ TargetLocation }}]</span>
          </div>
          <div class="imageClass">
            <el-image :src="Imag.TargetLocationImag" lazy></el-image>
          </div>
        </el-card>
        <el-col :span="6"> </el-col>
        <el-card shadow="hover" style="" class="imageClass_detail">
          <div slot="header" class="clearfix">
            <span>目标容器位置[{{ TargetBox }}]</span>
          </div>
          <div class="rotateClass">
            <el-image :src="Imag.TargetCIDImag" lazy>
              <div slot="error" class="image-slot"></div>
            </el-image>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never" class="card_button">
      <el-button @click="PrintBarcode()" disabled>打印条码</el-button>
      <el-button
        type="primary"
        class="buttonClass"
        @click="SkipTaskLine()"
        :loading="submit.SkipTask"
        :disabled="SkipTask"
        >任务跳过
      </el-button>
      <el-button
        type="primary"
        class="buttonClass"
        @click="CompleteTaskLineButton()"
        :loading="submit.CompleteTaskLine"
        :disabled="CompleteTaskLine"
        >任务完成
      </el-button>
      <el-button
        type="primary"
        class="buttonClass"
        @click="CompleteTaskButton()"
        :loading="submit.loading"
        :disabled="disabledFlag"
        >完成本单
      </el-button>
      <el-button
        type="primary"
        class="buttonClass"
        @click="ForceCompletionTaskButton()"
        :loading="submit.loading"
        >强制完成
      </el-button>
      <span style="margin-left: 30px"
        >工作台: {{ UserInfo.WbInfo.WbName }}</span
      >
    </el-card>
    <!-- 数字输入  -->
    <el-dialog :visible.sync="CalculatorDialogVisible" width="30%">
      <Calculator v-on:clickCardOk="clickCardOk" />
    </el-dialog>
    <audioPaly :audioValue="audioPaly"></audioPaly>
  </div>
</template>

<script>
import Arithmetic from '@/utils/ArithmeticMethod.js'
import {
  PrevLoading
} from '@/utils/loading.js'
import {
  GETReplenishmentTaskInfo,
  GETLocationInfo,
  POSTWRMMoveLoc,
  GetWRMInfo,
  GetCIDInfo,
  ReplenishmentTaskEnd,
  ReplenishmentTaskLineEnd,
  ReplenishmentSkipTaskLine,
  ReplenishmentForceCompletion
} from '@/api/api.js'
import Calculator from '@/components/pluginunit/Calculator.vue'
import audioPaly from '@/components/pluginunit/audioPaly.vue'
export default {
  name: 'ReplenishmentOPT',
  props: ['searchVal'],
  components: {
    Calculator,
    audioPaly
  },
  data () {
    return {
      submit: {
        loading: false,
        CompleteTaskLine: false,
        SkipTask: false
      },
      disabledFlag: true,
      CompleteTaskLine: true,
      SkipTask: true,
      audioPaly: '',
      // 扫描框内容
      scanInput: '',
      // 扫描框当前扫描类型
      scanType: 'OrderID',
      scanInputPlaceholder: '',
      scanInputFlag: true,
      scanInputType: {
        'OrderID': '请扫描单号.....',
        'SkuID': '请扫描商品编码.....',
        'OriginalBox': '请扫描源箱编码.....',
        'TargetBox': '请输入数量后，请扫描目标箱编码.....',
        'TargetLocation': '请扫描目标库位编码.....'
      },
      // 指定目标库位和目标箱
      TargetBox: '',
      TargetLocation: '',
      Imag: {
        OriginalLocationImag: '',
        OriginalCIDImag: '',
        TargetLocationImag: '',
        TargetCIDImag: ''
      },
      // 当前扫描商品信息（显示）
      CurrentGoods: {
        BillId: '',
        SkuId: '',
        SkuName: '',
        ImgUrl: ''
      },
      BillId: '',
      // 全部应扫描商品
      AllGoods: [],
      // 剩余应扫描商品
      ScannedGoods: [],
      // 扫描记录
      ScanRecord: [],
      // 页面显示应扫描数
      scansTotalNum: 0.0,
      // 页面显示当前已扫描数
      scansNum: 0.0,
      // 输入框标识
      CalculatorDialogVisible: false,
      UserInfo: {
        WbInfo: {
          WbName: ''
        }
      },
      CommitFrom: {
        CID: '',
        LocationId: ''
      },
      WarehouseId: '',
      StorerId: '',
      OperationFlag: true,
      localhostPath: ''
    }
  },
  created () {
    window.removeEventListener('onmessageWS', this.getSocketData);
    this.UserInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.init()
    this.scanInputMethod(this.scanType)
    this.getUrlPath()
  },
  methods: {
    GETTaskInfo (value, flag = true) {
      const params = {
        UserId: this.UserInfo.UserId,
        BillId: value,
        WbId: this.UserInfo.WbInfo.WbId,
        time: Date.parse(new Date())
      }
      GETReplenishmentTaskInfo(params).then(res => {
        // console.log(res)
        const result = res.data.data
        if (res.data.code == 0 && result.length != 0) {
          this.AllGoods = result
          this.GETWRMTask(value)
        } else {
          if (flag) {
            this.audioPlay('notexist')
            this.$message({
              message: res.data.message,
              type: 'error'
            });
          }
          this.scanInputMethod('OrderID')
        }
      }).catch(error => {
        throw error
      })
    },
    ForceCompletionTaskButton () {
      this.$prompt('请输入强制完成订单号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const params = {
          UserId: this.UserInfo.UserId,
          BillId: value,
          WbId: this.UserInfo.WbInfo.WbId,
          time: Date.parse(new Date())
        }
        ReplenishmentForceCompletion(params).then(res => {
          if (res.data.code == 0) {
            this.$message({
              message: "成功",
              type: 'success'
            });
          } else {
            this.audioPlay('error')
            this.$message({
              message: res.data.message,
              type: 'error'
            });
            this.scanInputMethod('OrderID')
          }
        }).catch(error => {
          throw error
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    GETWRMTask (value) {
      const params = {
        OrigBillId: value,
        WorkMode: 'Manual',
        UserId: this.UserInfo.UserId,
        time: Date.parse(new Date())
      }
      GetWRMInfo(params).then(res => {
        const ScanRecord = res.data
        if (ScanRecord.code === 0) {
          this.ScanRecord = ScanRecord.data
          // 收集全部扫描数
          this.OperationFilter()
        } else {
          this.audioPlay('error')
          this.$message({
            message: result.message,
            type: 'error'
          });
        }
      }).catch(error => {
        throw error
      })
    },
    OperationFilter () {
      this.Imag = {
        OriginalLocationImag: '',
        OriginalCIDImag: '',
        TargetLocationImag: '',
        TargetCIDImag: ''
      }
      var ScannedGoods = []
      var allCount = []
      var flag = true
      // 全部扫描情况
      ScannedGoods = JSON.parse(JSON.stringify(this.AllGoods))
      var toLoc = {}
      ScannedGoods.forEach((items, index, arr) => {
        if (toLoc[items.ToLoc] == undefined) {
          toLoc[items.ToLoc] = [items.FlowNo]
        } else {
          toLoc[items.ToLoc].push(items.FlowNo)
        }
      })
      for (var i = 0; i < ScannedGoods.length; i++) {
        if (ScannedGoods[i].DetailStatus == '20') {
          this.CurrentGoods = JSON.parse(JSON.stringify(ScannedGoods[i]))
          this.BillId = this.CurrentGoods.BillId
          this.StorerId = this.CurrentGoods.StorerId
          this.WarehouseId = this.CurrentGoods.WarehouseId
          console.log(this.CurrentGoods)
          this.LocationSearch(this.CurrentGoods.FromLoc, 'OriginalLocationImag')
          this.ImageCIDSearch(this.CurrentGoods.CID, 'OriginalCIDImag', true)

          this.scansTotalNum = parseFloat(this.CurrentGoods.ToQty)
          this.scansNum = 0
          var flagScanRecord = true

          for (var j = 0; j < this.ScanRecord.length; j++) {
            if ((this.ScanRecord[j].FlowNo == ScannedGoods[i].FlowNo
              && ScannedGoods[i].SkuId == this.ScanRecord[j].SkuId
              && ScannedGoods[i].CID == this.ScanRecord[j].FromCID && flagScanRecord) ||
              // 判断两个订单行是在同一个ToLoc且不是同一个订单行
              (toLoc[ScannedGoods[i].ToLoc].indexOf(this.ScanRecord[j].FlowNo) != -1 && this.ScanRecord[j].FlowNo != ScannedGoods[i].FlowNo)) {
              this.LocationSearch(this.ScanRecord[j].ToLoc, 'TargetLocationImag')
              this.ImageCIDSearch(this.ScanRecord[j].ToCID, 'TargetCIDImag', true)
              this.TargetLocation = this.ScanRecord[j].ToLoc
              this.TargetBox = this.ScanRecord[j].ToCID
              this.$message({
                message: '补货行已有指定目标箱，请放入指定目标箱',
                type: 'info'
              });
              flagScanRecord = false
            }
            if (ScannedGoods[i].SkuId == this.ScanRecord[j].SkuId && ScannedGoods[i].CID == this.ScanRecord[j].FromCID &&
              ScannedGoods[i].FlowNo == parseInt(this.ScanRecord[j].FlowNo)) {
              this.scansTotalNum = Arithmetic.accSub(this.scansTotalNum, parseFloat(this.ScanRecord[j].QtyIn))
            }
          }
          this.CompleteTaskLine = false
          this.disabledFlag = !flagScanRecord
          this.SkipTask = !flagScanRecord
          this.scanInputMethod('OriginalBox')
          flag = false
          if (flagScanRecord) {
            this.audioPlay('ok')
          } else {
            this.audioPlay('warning')
          }
          break
        }
      }
      // allCount[currentValueS.SkuId+currentValueS.ToLoc+currentValueS.StorerId] = allCount[currentValueS.SkuId+currentValueS.ToLoc+currentValueS.StorerId]!=undefined ? (Arithmetic.accAdd(allCount[currentValueS.SkuId+currentValueS.ToLoc+currentValueS.StorerId],parseFloat(currentValueS.ToQty))): parseFloat(currentValueS.ToQty)
      if (flag) {
        this.$message({
          message: '不存在未扫描任务',
          type: 'error'
        });
        this.scanInputMethod('OrderID')
      }
    },
    CompleteTaskButton () {
      this.submit.loading = true
      this.$confirm('请确认是否提交当前信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        const params = {
          UserId: this.UserInfo.UserId,
          BillId: this.BillId,
          time: Date.parse(new Date())
        }
        ReplenishmentTaskEnd(params).then(res => {
          const result = res.data.data
          if (res.data.code == 0) {
            this.$message({
              message: '成功！',
              type: 'success'
            });
            this.scanInputMethod('OrderID')
            this.audioPlay('success')
            this.disabledFlag = true
          } else {
            this.audioPlay('error')
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        }).catch(error => {
          throw error
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消当前提交操作'
        });
      });
      this.submit.loading = false
    },
    // 任务行完成
    CompleteTaskLineButton () {
      if (this.TargetBox == undefined || this.TargetBox == '' || this.BillId == '' || this.scansTotalNum == this.CurrentGoods.ToQty) {
        this.audioPlay('error')
        this.$message({
          message: '当前任务未执行扫描，若要跳过当前任务，请选择完成任务',
          type: 'warning'
        });
        return
      }
      this.submit.CompleteTaskLine = true
      this.$confirm('确认完成当前任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        const params = {
          UserId: this.UserInfo.UserId,
          BillId: this.BillId,
          OriginalBox: this.CurrentGoods.CID,
          TargetBox: this.TargetBox,
          FlowNo: this.CurrentGoods.FlowNo,
          ToLoc: this.CurrentGoods.ToLoc,
          SkuId: this.CurrentGoods.SkuId,
          time: Date.parse(new Date())
        }
        ReplenishmentTaskLineEnd(params).then(res => {
          const result = res.data.data
          if (res.data.code == 0) {
            this.$message({
              message: '成功！',
              type: 'success'
            });
            this.scanInputMethod('OrderID')
            this.GETTaskInfo(this.BillId, false)
            this.audioPlay('success')
            this.disabledFlag = true
          } else {
            this.audioPlay('error')
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        }).catch(error => {
          throw error
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消当前提交操作'
        });
      });
      this.submit.CompleteTaskLine = false
    },
    SkipTaskLine () {
      if (this.scansTotalNum != this.CurrentGoods.ToQty) {
        this.audioPlay('error')
        this.$message({
          message: '当前任务不支持跳过，若要完成请选择完成任务',
          type: 'warning'
        });
        return
      }
      this.submit.SkipTask = true
      this.$confirm('确认跳过当前行任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        const params = {
          UserId: this.UserInfo.UserId,
          BillId: this.BillId,
          FlowNo: this.CurrentGoods.FlowNo,
          SkuId: this.CurrentGoods.SkuId,
          OriginalCID: this.CurrentGoods.CID,
          time: Date.parse(new Date())
        }
        ReplenishmentSkipTaskLine(params).then(res => {
          const result = res.data.data
          if (res.data.code == 0) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
            this.GETTaskInfo(this.BillId, false)
            this.audioPlay('success')
            this.SkipTask = true
          } else {
            this.audioPlay('error')
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        }).catch(error => {
          throw error
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消当前提交操作'
        });
      });
      this.submit.SkipTask = false
    },
    ScanTargetBox (value) {
      if (this.scansNum === 0 || this.CurrentGoods.QtyIn === undefined || parseFloat(this.CurrentGoods.QtyIn) == 0) {
        this.audioPlay('error')
        this.$message({
          message: '请输入补货数量',
          type: 'error'
        });
        return
      }
      if (this.TargetBox != '' && this.TargetBox != value) {
        this.audioPlay('error')
        this.$message({
          message: '请按照推荐箱码扫描',
          type: 'error'
        });
        return
      }
      const params = {
        UserId: this.UserInfo.UserId,
        CID: value,
        time: Date.parse(new Date())
      }
      GetCIDInfo(params).then(res => {
        const result = res.data.data
        if (result.length > 0 && res.data.code == 0) {
          if (result[0].used > 0) {
            this.audioPlay('error')
            this.$message({
              message: '托盘已经被使用',
              type: 'error'
            });
            return
          }
          if (parseFloat(result[0].stock) > 0.0) {
            this.audioPlay('error')
            this.$message({
              message: '托盘存在库存',
              type: 'error'
            });
            return
          }
          this.CurrentGoods.TargetBox = result[0].CID
          this.ImageCIDSearch([1, 1], 'TargetCIDImag', true)
          this.scanInputMethod('TargetLocation')
          this.audioPlay('ok')
        } else {
          this.audioPlay('notexist')
          this.$message({
            message: '目标箱码错误，请确定目标箱是否正确',
            type: 'error'
          });
        }
      })
    },
    ScanTargetLocation (value) {
      if (this.TargetLocation != '' && this.TargetLocation != value) {
        this.audioPlay('error')
        this.$message({
          message: '请按照推荐库位扫描',
          type: 'error'
        });
        return
      }
      this.LocationSearch(value, 'TargetLocationImag')
      this.CurrentGoods.TargetLocation = value
      this.CurrentGoods.UserId = this.UserInfo.UserId
      this.CurrentGoods.WbId = this.UserInfo.WbInfo.WbId
      this.CurrentGoods.time = Date.parse(new Date())
      const params = JSON.parse(JSON.stringify(this.CurrentGoods))
      POSTWRMMoveLoc(params).then(res => {
        const result = res.data
        if (res.data.code === 0) {
          this.audioPlay('success')
          result.data.forEach(item => {
            if (item.message.length > 3) {
              this.$message({
                message: item.message,
                type: 'success'
              });
            }
          })
          this.$message({
            message: '成功！',
            type: 'success'
          });
          this.ScanRecord.push(JSON.parse(JSON.stringify(this.CurrentGoods)))
          this.GETTaskInfo(this.BillId, false)
        } else {
          this.audioPlay('error')
          this.$message({
            message: result.message,
            type: 'error'
          });
        }
      }).catch(error => {
        throw error
      })
    },
    ScanOriginalBox (value) {
      if (this.CurrentGoods.CID !== value) {
        this.audioPlay('error')
        this.$message({
          message: '源箱编码错误，请确定箱码是否正确',
          type: 'error'
        });
        return
      }
      this.disabledFlag = true
      this.SkipTask = true
      this.CurrentGoods.OriginalBox = value
      this.scanInputMethod('SkuID')
      this.audioPlay('ok')
    },
    // 异步登录打印机
    async init () {
      var url = "ws://localhost:13145/Login?UserId=" + this.UserInfo.UserId;
      var command = {
        RemoteUrl: this.UserInfo.RemoteUrl,
      };
      this.SendCommand(url, command);
    },
    // 打印条码
    PrintBarcode () {
      // 存储区不能为空，且需要扫描指定订单后才能打印条码。
      if (this.StorerId == '' || this.scanType == 'OrderID') {
        this.audioPlay('error')
        this.$message({
          type: 'info',
          message: '请先扫描要补库的订单信息'
        });
        return
      }

      this.$prompt('请输入要打印的商品编码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({
        value
      }) => {
        var url = "ws://localhost:13145/Print?UserId=" + this.UserInfo.UserId;
        var command = [{
          TaskId: value + '_' + Date.parse(new Date()).toString(),
          WarehouseId: this.WarehouseId,
          StorerId: this.StorerId,
          MenuId: "M222",
          Action: "Print",
          DataSourceParameter: "{'StorerId':'" + this.StorerId + "',SkuId:'" + value + "'}"
        }];
        this.SendCommand(url, command);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '打印已取消'
        });
      });
    },
    SendCommand (url, command) {
      var ws = new WebSocket(url);
      ws.onopen = function () {
        ws.send(JSON.stringify(command));
      };
      ws.onmessage = function (e) {
        //alert(e.data);
        console.log(e.data);
        document.getElementById('response').innerText = e.data;
      };
      ws.onclose = function () {
        //alert("close");
      };
    },
    audioPlay (value) {
      this.audioPaly = value
      setTimeout(() => {
        this.audioPaly = ''
      }, 1000)
    },
    enterScanInput () {
      if (!this.checkInputEmpty()) {
        return
      }
      const value = this.scanInput.replace(/\ +/g,"").replace(/[\r\n]/g,"");
      this.scanInput = value
      // 订单信息
      if (this.scanType == 'OrderID') {
        this.GETTaskInfo(value)

      }
      // SKU编码
      else if (this.scanType == 'SkuID') {
        this.ScanSkuInfo(value)
      }
      // 扫描源箱
      else if (this.scanType == 'OriginalBox') {
        this.ScanOriginalBox(value)

      }
      // 扫描目标箱
      else if (this.scanType == 'TargetBox') {
        this.ScanTargetBox(value)

      }
      // 扫描目标库位
      else if (this.scanType == 'TargetLocation') {
        this.ScanTargetLocation(value)

      } else {
        this.$message({
          message: '系统错误，请刷新当前页面',
          type: 'error'
        });
        return
      }
      this.$nextTick(() => {
        this.$refs.scanInputfocus.focus()
      })
    },
    // 库位图展示
    LocationSearch (value, type) {
      const params = {
        UserId: this.UserInfo.UserId,
        LocationId: value,
        time: Date.parse(new Date())
      }
      GETLocationInfo(params).then(res => {
        var result = res.data.data[0]
        if (res.data.code == 0) {
          this.audioPlay('ok')
          this.Imag[type] = require('../assets/imag/tmp38/' + result.LLayer +
            '-' + result.LColumn + '.png')
          if (type === 'TargetLocation') {
            this.ScanTargetLocation(value)
          }
        } else {
          this.audioPlay('notexist')
          this.$message({
            message: '目标库位错误，请确定库位是否正确',
            type: 'error'
          });
        }
      }).catch(error => {
        throw error
      })
    },
    ImageCIDSearch (value, type, status = true) {
      status = value.split('-').length === 1
      if (status) {
        value = [1, 1]
      } else {
        value = [6, value.split('-')[1]]
      }
      this.Imag[type] = require('../assets/imag/tote/' + parseInt(value[0]) + '-' + parseInt(value[1]) + '.png')
    },
    // 扫描SKU
    ScanSkuInfo (value) {
      var scanCount = 0
      if (this.CurrentGoods.SkuId !== value) {
        this.audioPlay('error')
        this.$message({
          message: '请按照推荐SKU扫描！',
          type: 'error'
        });
        return
      }
      this.scanInputMethod('TargetBox')
      this.audioPlay('ok')
    },
    // 判断应扫描数是否大于等于输入扫描数
    clickCardOk (value) {
      if (parseFloat(this.scansTotalNum) >= parseFloat(value) && parseFloat(value) >= 0.0) {
        this.scansNum = parseFloat(value)
        this.CurrentGoods.QtyIn = parseFloat(value)
        this.CalculatorDialogVisible = false
      } else {
        this.$message({
          message: '扫描数不能大于应扫描总数',
          type: 'warning'
        });
      }
    },
    // 改变扫描框
    scanInputMethod (newType) {
      if (this.scanInputType[newType] === undefined) {
        return
      }
      if (newType == 'OrderID') {
        this.CurrentGoods = {}
        this.BillId = ''
        // 全部应扫描商品
        this.AllGoods = []
        // 已扫描商品
        this.ScannedGoods = []
        // 显示扫描记录
        this.ScanRecord = []
        // 页面显示应扫描数
        this.scansTotalNum = 0
        // 页面显示当前已扫描数
        this.scansNum = 0
        // 按钮置灰色
        this.CompleteTaskLine = true
        this.SkipTask = true
        this.disabledFlag = true
        this.WarehouseId = ''
        this.StorerId = ''
        this.TargetLocation = ''
        this.TargetBox = ''
      }
      this.scanInput = ''
      this.scanInputPlaceholder = this.scanInputType[newType];
      this.scanType = newType;
    },
    getUrlPath () {
      let wPath = window.document.location.href;
      // 获取当前页面主机地址之后的目录，如：/admin/index
      let pathName = this.$route.path;
      let pos = wPath.indexOf(pathName);
      // 获取主机地址，如：http://localhost:8080
      this.localhostPath = wPath.substring(0, pos).split('#')[0];
      this.localhostPath = this.localhostPath.substring(0, this.localhostPath.length - 1);
    },
    // 点击计算器验证
    clickCalculator () {
      if (this.scanType == 'TargetBox' || this.scanType == 'TargetLocation') {
        this.CalculatorDialogVisible = true
        return
      }
      this.audioPlay('error')
      this.$message({
        message: '获取订单并且扫描SKU后才能对数量进行操作',
        type: 'error'
      });
    },
    // 检查输入扫描框是否为空
    checkInputEmpty () {
      if (this.scanInput == '') {
        this.audioPlay('error')
        this.$message({
          message: '请检查扫描框内容是否为空',
          type: 'error'
        });
        return false
      }
      return true
    }
  },
  watch: {
    searchVal: function (val) {
      console.log(val); // 接收父组件的值
      this.WindowsSize = val;
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.my-label {
  font-size: 1.3vw;
  width: 10vw;
  /* font-weight: 550 !important; */
  text-align: center !important;
  color: #000000 !important;
}

.my-content {
  color: #000000;
  font-size: 1.3vw;
  /* font-weight: 550 !important; */
  width: 40vw;
}
</style>
<style scoped lang="scss">
.card_box {
  margin-top: 5px;
}

.card_button {
  margin-top: 20px;
  height: 10vh;
  border: none;
  display: flex;
  margin-left: 6vw;

  .el-card__body {
    & > .el-button {
      margin-left: 1vw;
    }
  }
}

.box-card_detail {
  height: 50vh;
}

.paddingStyle {
  /deep/.el-card__body {
    padding: 0px !important;
  }
}

.dialog_commit {
  .el-form {
    .el-form-item {
      /deep/.el-form-item__label {
        font-size: 2.5vh;
        line-height: 4vh;
      }

      .el-form-item__content {
        .el-input {
          /deep/.el-input__inner {
            height: 5vh;
            font-size: 2.5vh;
          }
        }
      }
    }
  }
}

.ItemNumInfo {
  font-size: 7.5vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #ff0000;
  margin-top: 2vh;
}

.ItemNumlabel {
  font-size: 3vh;
  margin-top: 1vh;
}

.ItemNumInfoDetail {
  font-size: 3vh;
  margin-top: 2vh;
  // border: 1px solid #CCCCCC;
}

.imageClass {
  .el-image {
    // &>img {
    /deep/.el-image__inner {
      height: 50%;
      width: 20.5vh;
    }
  }
}

.rotateClass {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: rotate(90deg);
  margin-top: -5vh;

  /deep/.el-image__inner {
    height: 100%;
    width: 18vh;
  }
}

.imageClass_detail {
  height: 25vh;
}

.buttonClass {
  width: 200px;
  height: 70px;
  font-size: 25px;
}

// .pagination {
// 	margin-top: 20px;
// 	text-align: right;
// }
// .el-form-item {
//     margin-bottom: 0px !important;
// }
// .el-form {
// 	display: flex;
// }
// 顶部扫描框
.headerInputClass {
  height: 11vh;

  /deep/ .el-input__inner {
    height: 100%;
    font-size: calc(100vh - 93vh);
    background-color: rgb(84, 105, 122);
    color: #ffffff;
  }

  /deep/ .el-input__inner::-webkit-input-placeholder {
    color: #ffffff;
  }
}

.el-message-box {
  .el-message-box__content {
    .el-message-box__container {
      .el-message-box__message {
        & > p {
          font-size: 25px;
        }
      }
    }
  }
}

// 卡片头部
/deep/.el-card__header {
  padding: 8px 32px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
